import styles from "@styles/active/activedetail.module.less";

import React, { useState, useEffect } from "react";
import { withRouter } from "react-router-dom";
import { message, Button, Collapse } from "antd";
import { CaretRightOutlined } from "@ant-design/icons";

import Http from "@utils/api";
import { activityType, isnullObj, filMenuState } from "@actions/data";

import SignUp from "@pages/active/detail/signup";
import Vote from "@pages/active/detail/vote";
import RobTickets from "@pages/active/detail/robTickets";
import SignIn from "@pages/active/detail/signin";
import LuckyDraw from "@pages/active/detail/luckyDraw";

const { Panel } = Collapse;

function ActivityDetails({ history, location }) {
  const {
    state: { activityBasicId },
  } = location;

  const [formCreate, setFormCreate] = useState({}); // 表单 — 基本信息
  const [formSignUp, setFormSignUp] = useState({}); // 表单 — 报名
  const [formVote, setFormVote] = useState({}); // 表单 - 投票
  const [formRobTickets, setFormRobTickets] = useState({}); // 表单 — 门票
  const [formSignIn, setFormSignIn] = useState({}); // 表单 — 签到
  const [formLuckyDraw, setFormLuckyDraw] = useState({}); // 表单 — 抽奖

  const [title, setTitle] = useState("");
  const [active, setActive] = useState(0);
  const [henderType, setHenderType] = useState([]);

  // key 当前don索引 tabs切换
  const activeMenu = (key) => setActive(key);

  // 创建的活动 - 展开/收起
  const changehender = (value) => setHenderType([...value]);

  const getcreateActInfo = () => {
    Http.queryByUpdate({
      activityBasicId: activityBasicId,
    }).then(({ data, data: { activityVOS } }) => {
      setFormCreate(data);
      activityVOS.forEach((item) => {
        switch (item.activityType) {
          case 1:
            setFormSignUp(item);
            break;
          case 2:
            setFormVote(item);
            break;
          case 3:
            setFormRobTickets(item);
            break;
          case 4:
            setFormSignIn(item);
            break;
          case 5:
            setFormLuckyDraw(item);
            break;
          default:
            message.error("未发现此项");
            break;
        }
      });
    });
  };

  const onCancelActPage = () => {
    history.push({ pathname: "/createActivity", state: {} });
  };

  useEffect(() => {
    setTitle("详情");
    getcreateActInfo();

    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    <section className={styles.activedetail}>
      <h1>{title}</h1>
      <ul style={{ display: "flex" }} className={styles.menus}>
        {activityType.map((item) => (
          <li
            key={item.id}
            className={item.id === active ? styles.active : ""}
            onClick={() => activeMenu(item.id)}
          >
            <span>{item.name}</span>
          </li>
        ))}
      </ul>
      <pre className={styles.detailContent}>
        {active ? (
          <article className={styles.detailactBox}>
            <Collapse
              collapsible="header"
              expandIconPosition="right"
              bordered={false}
              onChange={changehender}
              expandIcon={({ isActive }) => (
                <CaretRightOutlined rotate={isActive ? -90 : 90} />
              )}
              className={styles.customCollapse}
              //   defaultActiveKey={["1", "2", "3", "4", "5"]}
            >
              {!isnullObj(formSignUp) ? (
                <Panel
                  header="报名"
                  key="1"
                  extra={henderType.includes("1") ? `收起` : `展开`}
                  className={styles.customPanel}
                >
                  <SignUp formSignUp={formSignUp} />
                </Panel>
              ) : (
                <></>
              )}
              {!isnullObj(formVote) ? (
                <Panel
                  header="投票"
                  key="2"
                  extra={henderType.includes("2") ? `收起` : `展开`}
                  className={styles.customPanel}
                >
                  <Vote formVote={formVote} />
                </Panel>
              ) : (
                <></>
              )}
              {!isnullObj(formRobTickets) ? (
                <Panel
                  header="门票"
                  key="3"
                  extra={henderType.includes("3") ? `收起` : `展开`}
                  className={styles.customPanel}
                >
                  <RobTickets formRobTickets={formRobTickets}></RobTickets>
                </Panel>
              ) : (
                <></>
              )}
              {!isnullObj(formSignIn) ? (
                <Panel
                  header="签到"
                  key="4"
                  extra={henderType.includes("4") ? `收起` : `展开`}
                  className={styles.customPanel}
                >
                  <SignIn formSignIn={formSignIn}></SignIn>
                </Panel>
              ) : (
                <></>
              )}
              {!isnullObj(formLuckyDraw) ? (
                <Panel
                  header="抽奖"
                  key="5"
                  extra={henderType.includes("5") ? `收起` : `展开`}
                  className={styles.customPanel}
                >
                  <LuckyDraw formLuckyDraw={formLuckyDraw}></LuckyDraw>
                </Panel>
              ) : (
                <></>
              )}
            </Collapse>
          </article>
        ) : (
          <article className={styles.actBasicBox}>
            <aside>
              <dl>
                <dt>活动名称：</dt>
                <dd>
                  <span>{formCreate.activityName}</span>
                  <span className={styles.status}>
                    {/* {formCreate.activityStatus} */}
                    {filMenuState(formCreate.activityStatus || 0)}
                  </span>
                </dd>
              </dl>
              <dl>
                <dt>活动地点：</dt>
                <dd>
                  <span>{formCreate.activitySite}</span>
                </dd>
              </dl>
              <dl>
                <dt>活动时间：</dt>
                <dd>
                  <span>
                    {formCreate.startDate} - {formCreate.endDate}
                  </span>
                </dd>
              </dl>
              <dl>
                <dt>活动内容：</dt>
                <dd>
                  <span>{formCreate.activityContent}</span>
                </dd>
              </dl>
              <dl>
                <dt>日程安排：</dt>
                <dd>
                  <span>
                    {(formCreate.scheduleVOS || []).map((item, inde) => (
                      <p key={item.scheduleName + inde}>
                        <span>{item.scheduleDate}</span>
                        <span>{item.scheduleName}</span>
                      </p>
                    ))}
                  </span>
                </dd>
              </dl>
            </aside>
            <Button
              htmlType="submit"
              type="primary"
              style={{ margin: "42px 0 0 70px" }}
              onClick={onCancelActPage}
            >
              返回
            </Button>
          </article>
        )}
      </pre>
    </section>
  );
}

export default withRouter(ActivityDetails);
